
@mixin flex($direction: row,$alignItems:flex-start) {
  display: flex;
  flex-direction: $direction;
  align-items: $alignItems;
}

@mixin flex-center($type:flex) {
  @include flex(row, center)
}

@mixin flex-baseline($type:flex) {
  @include flex(row, baseline)
}

@mixin flex-end($type:flex) {
  @include flex(row, flex-end)
}

.flex-col {
  @include flex(column,);
}

.flex {
  @include flex;
}

.flex-1 {
  flex: 1;
}


.flex-end {
  @include flex-end;
}

.flex-center {
  @include flex-center;
}

@mixin setDirectionName($var) {
  @if $var == 'space-bt' {
    justify-content: space-between;
  }
  @if $var == 'space-ar' {
    justify-content: space-around;
  }
  @if $var == 'end' {
    justify-content: flex-end;
  }
  @if $var == 'center' {
    justify-content: center;
  }
}

@each $var in space-bt, space-ar, end, center {
  .flex-end-#{$var} {
    @include flex-end;
    @include setDirectionName($var)
  }
  .flex-start-#{$var} {
    @include flex;
    @include setDirectionName($var)
  }
  .flex-col-center-#{$var} {
    @include flex(column);
    align-items: center;
    @include setDirectionName($var)
  }
  .flex-center-#{$var} {
    @include flex-center;
    @include setDirectionName($var)
  }
  .flex-baseline-#{$var} {
    @include flex-baseline;
    @include setDirectionName($var)
  }
}

.flex,
.flex-row{
  @include flex;
}

.flex-column {
  @include flex(column);
}

.flex-x-center {
  @include flex;
  justify-content: center;
}

.flex-xy-center {
  @include flex;
  justify-content: center;
  align-items: center;
}

.flex-y-center {
  @include flex;
  align-items: center;
}

.flex-x-reverse,
.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-y-reverse,
.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex.flex-reverse,
.flex-row.flex-reverse,
.flex-x.flex-reverse {
  flex-direction: row-reverse;
}

.flex-column.flex-reverse,
.flex-y.flex-reverse {
  flex-direction: column-reverse;
}
